<form #systemConfigFrom="ngForm" class="compact">
    <section class="form-block">
        <label class="subtitle" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
        <div class="form-group">
            <label for="proCreation">{{'CONFIG.PRO_CREATION_RESTRICTION' | translate}}</label>
            <div class="select">
                <select id="proCreation" name="proCreation"
                        [(ngModel)]="systemSettings.project_creation_restriction.value"
                        [disabled]="disabled(systemSettings.project_creation_restriction)">
                    <option value="everyone">{{'CONFIG.PRO_CREATION_EVERYONE' | translate }}</option>
                    <option value="adminonly">{{'CONFIG.PRO_CREATION_ADMIN' | translate }}</option>
                </select>
            </div>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true"
               class="tooltip tooltip-lg tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="tokenExpiration" class="required">{{'CONFIG.TOKEN_EXPIRATION' | translate}}</label>
            <label for="tokenExpiration" aria-haspopup="true" role="tooltip"
                   class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                   [class.invalid]="tokenExpirationInput.invalid && (tokenExpirationInput.dirty || tokenExpirationInput.touched)">
                <input name="tokenExpiration" type="text" #tokenExpirationInput="ngModel"
                       [(ngModel)]="systemSettings.token_expiration.value"
                       required pattern="^[1-9]{1}[0-9]*$" id="tokenExpiration" size="20" [disabled]="!editable">
                <span class="tooltip-content">
                    {{'TOOLTIP.NUMBER_REQUIRED' | translate}}
                </span>
            </label>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.TOKEN_EXPIRATION' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="robotTokenExpiration" class="required">{{'ROBOT_ACCOUNT.TOKEN_EXPIRATION' | translate}}</label>
            <label for="robotTokenExpiration" aria-haspopup="true" role="tooltip"
                   class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                   [class.invalid]="robotTokenExpirationInput.invalid && (robotTokenExpirationInput.dirty || robotTokenExpirationInput.touched)">
                <input name="robotTokenExpiration" type="text" #robotTokenExpirationInput="ngModel"
                       (ngModelChange)="changeToken($event)" [(ngModel)]="robotTokenExpiration"
                       required pattern="^[1-9]{1}[0-9]*$" id="robotTokenExpiration" size="20"
                       [disabled]="!robotExpirationEditable">
                <span class="tooltip-content">
                    {{'ROBOT_ACCOUNT.NUMBER_REQUIRED' | translate}}
                </span>
            </label>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.ROBOT_TOKEN_EXPIRATION' | translate}}</span>
            </a>
        </div>
        <div class="form-group" *ngIf="canDownloadCert">
            <label for="certDownloadLink" class="required">{{'CONFIG.ROOT_CERT' | translate}}</label>
            <a #certDownloadLink [href]="downloadLink" target="_blank">{{'CONFIG.ROOT_CERT_LINK' | translate}}</a>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.ROOT_CERT_DOWNLOAD' | translate}}</span>
            </a>
        </div>
        <div *ngIf="!withAdmiral" class="form-group">
            <label for="repoReadOnly">{{'CONFIG.REPO_READ_ONLY' | translate}}</label>
            <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox name="repoReadOnly" id="repoReadOnly"
                       [ngModel]="systemSettings.read_only.value"
                       (ngModelChange)="setRepoReadOnlyValue($event)"/>
                <label>
                    <a href="javascript:void(0)" role="tooltip" aria-haspopup="true"
                       class="tooltip tooltip-top-right read-tooltip">
                        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                        <span class="tooltip-content">{{'CONFIG.TOOLTIP.REPO_TOOLTIP' | translate}}</span>
                    </a>
                </label>
            </clr-checkbox-wrapper>
        </div>
        <div class="form-group" *ngIf="withClair">
            <label for="systemWhitelist">{{'CVE_WHITELIST.DEPLOYMENT_SECURITY'|translate}}</label>
            <div class="form-content w-100">
                <div>
                    <div>
                        <span class="title">{{'CVE_WHITELIST.CVE_WHITELIST'|translate}}</span>
                    </div>
                    <div>
                        <span>{{'CVE_WHITELIST.SYS_WHITELIST_EXPLAIN'|translate}}</span>
                    </div>
                    <div>
                        <span>{{'CVE_WHITELIST.ADD_SYS'|translate}}</span>
                    </div>
                    <div *ngIf="hasExpired">
                        <span class="label label-warning">{{'CVE_WHITELIST.WARNING_SYS'|translate}}</span>
                    </div>
                </div>
                <div class="clr-row width-70per">
                    <div class="clr-col position-relative">
                        <div>
                            <button (click)="showAddModal=!showAddModal"
                                    class="btn btn-link">{{'CVE_WHITELIST.ADD'|translate}}</button>
                        </div>
                        <div class="add-modal" *ngIf="showAddModal">
                            <clr-icon (click)="showAddModal=false" class="float-lg-right margin-top-4" shape="window-close"></clr-icon>
                            <div>
                                <clr-textarea-container>
                                    <label>{{'CVE_WHITELIST.ENTER'|translate}}</label>
                                    <textarea class="w-100 font-italic" clrTextarea [(ngModel)]="cveIds"
                                              name="cveIds"></textarea>
                                    <clr-control-helper>{{'CVE_WHITELIST.HELP'|translate}}</clr-control-helper>
                                </clr-textarea-container>
                            </div>
                            <div>
                                <button [disabled]="isDisabled()" (click)="addToSystemWhitelist()"
                                        class="btn btn-link">{{'CVE_WHITELIST.ADD'|translate}}</button>
                            </div>
                        </div>
                        <ul class="whitelist-window">
                            <li *ngIf="systemWhitelist?.items?.length<1"
                                class="none">{{'CVE_WHITELIST.NONE'|translate}}</li>
                            <li *ngFor="let item of systemWhitelist?.items;let i = index;">
                                <span class="hand" (click)="goToDetail(item.cve_id)">{{item.cve_id}}</span>
                                <clr-icon (click)="deleteItem(i)" class="float-lg-right margin-top-4"
                                          shape="times-circle"></clr-icon>
                            </li>
                        </ul>
                    </div>
                    <div class="clr-col padding-top-8">
                        <div class="form-group padding-left-80">
                            <label for="expires">{{'CVE_WHITELIST.EXPIRES_AT'|translate}}</label>
                            <div class="underline">
                                <input #dateInput placeholder="{{'CVE_WHITELIST.NEVER_EXPIRES'|translate}}" readonly
                                       type="date" [(clrDate)]="expiresDate" newFormLayout="true">
                            </div>
                        </div>
                        <div class="form-group padding-left-80">
                            <clr-checkbox-wrapper>
                                <input [checked]="neverExpires" [(ngModel)]="neverExpires" type="checkbox" clrCheckbox
                                       name="neverExpires" id="neverExpires"/>
                                <label>
                                    {{'CVE_WHITELIST.NEVER_EXPIRES'|translate}}
                                </label>
                            </clr-checkbox-wrapper>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</form>
<div>
    <button type="button" id="config_system_save" class="btn btn-primary" (click)="save()"
            [disabled]="(!isValid() || !hasChanges()) && (!hasWhitelistChanged) || inProgress">{{'BUTTON.SAVE'
        | translate}}</button>
    <button type="button" class="btn btn-outline" (click)="cancel()"
            [disabled]="(!isValid() || !hasChanges()) && (!hasWhitelistChanged) || inProgress">{{'BUTTON.CANCEL'
        | translate}}</button>
</div>
<confirmation-dialog #cfgConfirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>